<template>
	<view class="bi-plus-button" @click="handleClick">
		<view class="bi-plus-button__inner">
			<view class="bi-plus-button__icon"></view>
			<view class="bi-plus-button__text">添加</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'BiPlusButton',
		methods: {
			handleClick () {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="less">
.bi-plus-button{
	min-width: 36px;
	height: 36px;
	line-height: 36px;
	padding: 0 3px;
	border-radius: 3px;
	display: inline-block;
	border-radius: 3px;
	&:active {
		opacity: .7;
	}
}
.bi-plus-button__inner{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.bi-plus-button__icon{
	width: 18px;
	height: 18px;
	background: url('./icon.png') no-repeat 50% 50%;
	background-repeat: no-repeat;
	background-size: 14px;
}
.bi-plus-button__text {
	height: 18px;
	line-height: 18px;
	font-size: 12px;
	color: #F47554;
}
</style>